<template>
	<layout>
		<view class="check-bedroom">
			<view class="search-area">
				<view class="">
					<uni-data-picker placeholder="请选择寝室" popup-title="选择寝室" :localdata="dataTree" v-model="form.dormId"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
						@popupclosed="onpopupclosed">
					</uni-data-picker>
				</view>
				<view>
					<uni-datetime-picker type="date" v-model="form.checkTime" />
				</view>
			</view>
			<view class="content">
				<uni-section title="学生列表" type="line" padding>
					<uni-forms ref="baseForm" :rules="rules" v-model="studentList" label-position="left"
						label-width="260rpx">
						<uni-forms-item :label="item.studentName" required name="status"
							v-for="(item, i) in studentList" :key="item.studentId">
							<uni-data-checkbox mode="tag" v-model="item.status"
								:localdata="statusList"></uni-data-checkbox>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</view>
			<button type="primary" class="bg-blue submitBtn" @click="submit('baseForm')">提交</button>
		</view>
	</layout>
</template>

<script>
	import layout from '../../common/layout/layout.vue';
	import {
		leaveApply,
		getDormDetail,
		getBuildingAndDormList,
		addDormCheck,
		queryCheckHistory
	} from '@/api/system/user.js'
	import {
		formatDateTime
	} from '@/utils/common.js'
	export default {
		components: {
			layout
		},
		data() {
			return {
				studentList: [],
				statusList: [{
						value: '0',
						text: "在寝"
					},
					{
						value: '1',
						text: "请假"
					},
					{
						value: '2',
						text: "缺寝"
					},
				],
				form: {
					dormId: '',
					checkTime: new Date(),
				},
				rules: {
					// status: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '不能为空'
					// 	}]
					// },

				},
				dataTree: [],
				dormId: '',
			}
		},
		watch: {
			'form.dormId': {
				handler: function(n) {
					// this.getDormDetail();
					this.queryCheckHistory();
				},
				deep: true
			},
			'form.checkTime': {
				handler: function(n) {
					// this.getDormDetail();
					this.queryCheckHistory();
				},
				deep: true
			}
		},
		mounted() {
			this.getBuildingAndDormList();
		},
		methods: {
			onnodeclick(e) {
				this.dormId = e.value;
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			getStudentList() {

			},
			submit(ref) {
				if (!this.form.checkTime) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					});
					return;
				}
				if (!this.studentList.length) {
					uni.showToast({
						title: '没有学生',
						icon: 'none'
					});
					return;
				}

				console.log(this.$store.state?.user)
				this.$refs[ref].validate().then(res => {
					if (this.studentList.some(c => !c.status)) {
						uni.showToast({
							icon: 'error',
							title: '未完成学生查寝'
						})
						return;
					};
					// dtoList
					addDormCheck(
							 this.studentList.map(c => {
								c.checkTime = this.form.checkTime;
								return c;
							})
						)
						.then(data => {
							uni.showToast({
								title: '成功'
							})
							setTimeout(() => {
								this.$tab.navigateTo('/pages/index')
							}, 300)
						})
						.catch(data => {
							uni.showToast({
								title: data
							})
						})
				}).catch(err => {
					console.log('err', err);
				})
			},
			getBuildingAndDormList() {
				getBuildingAndDormList()
					.then(data => {
						this.dataTree = data.data || [];
					})
			},
			getDormDetail(id) {
				getDormDetail(this.form.dormId)
					.then(data => {
						this.studentList = data.data.studentList || [];
					})
			},
			queryCheckHistory(id) {
				this.studentList = [];
				queryCheckHistory({
					dormId: this.form.dormId,
					checkDate: this.form.checkTime
				})
					.then(data => {
						this.studentList = (data.data || []).map(c => {
							c.status = c.status ?  (c.status + '') : '0';
							return c;
						});
					})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.check-bedroom {
		height: calc(100vh - 60rpx);
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 40rpx;
		.search-area {
			display: flex;
			justify-content: space-between;

			>view {
				width: 45%;
			}
		}

		.content {
			margin-top: 30rpx;
			padding-bottom: 50rpx;
		}
		.submitBtn {
			position: fixed;
			bottom: 10rpx;
			width: calc(100% - 60rpx);
		}
	}

	/* 不推荐在Vue中使用深度选择器 */
	::v-deep .input-value {
		height: 38px !important;
	}

	::v-deep .uni-forms-item {
		padding-bottom: 10rpx;
		border-bottom: 1px solid #e9e6e6;
	}
	::v-deep .checklist-group {
		justify-content: flex-end;
	}
</style>